import React, {
  memo,
  // useCallback,
  useMemo,
  useState,
} from 'react'

function calcNumTotal(num) {
  console.log('calcNumTotal 重新调用')
  let total = 0
  for (let i = 0; i <= num; i++) {
    total += i
  }
  return total
}

const HelloWorld = memo(function (props) {
  console.log('HelloWorld 重新渲染')
  return <h2>Hello World</h2>
})

export default memo(function App() {
  const [count, setCount] = useState(0)

  let result = calcNumTotal(50)

  // 对返回值进行缓存，依赖没有改变时，不会重复执行， useCallback是查看依赖项是否改变后，是否需要重新定义新的函数
  // 1.不依赖任何值进行计算
  // let result = useMemo(() => calcNumTotal(50), [])

  // 2. 依赖count
  // let result = useMemo(() => calcNumTotal(count * 2), [count])

  // function fn() {}
  // 这两种方式等同
  // let increment = useCallback(fn, [])
  // let increment2 = useMemo(() => fn, [])

  // 3. 使用useMemo对子组件渲染进行优化(父组件重新渲染后，使用info的子组件都会重新渲染，因为在父组件重新渲染时都会重新定义一个新的info对象)
  // const info = { name: 'why', age: 18 }
  const info = useMemo(() => ({ name: 'why', age: 18 }), [])
  return (
    <div>
      <h2>计算结果：{result}</h2>
      <h2>计数器： {count}</h2>
      <button onClick={(e) => setCount(count + 1)}>+1</button>

      <HelloWorld result={result} info={info} />
    </div>
  )
})
